<template>
  <el-space style="width: 100%" class="theme-page" direction="vertical" alignment="start">
    <el-space>
      <el-button type="primary" @click="handleNprogress(true)">开始nprogress</el-button>
      <el-button type="info" @click="handleNprogress(false)">结束nprogress</el-button>
    </el-space>
    <el-space>
      <el-link>default</el-link>
      <el-link type="primary">primary</el-link>
      <el-link type="success">success</el-link>
      <el-link type="warning">warning</el-link>
      <el-link type="danger">danger</el-link>
      <el-link type="info">info</el-link>
    </el-space>
    <el-space>
      <el-button>按钮</el-button>
      <el-button type="primary">按钮</el-button>
      <el-button type="success">按钮</el-button>
      <el-button type="warning">按钮</el-button>
      <el-button type="info">按钮</el-button>
      <el-button type="danger">按钮</el-button>
    </el-space>
    <el-space>
      <el-tag>标签</el-tag>
      <el-tag type="success">标签</el-tag>
      <el-tag type="warning">标签</el-tag>
      <el-tag type="info">标签</el-tag>
      <el-tag type="danger">标签</el-tag>
      <el-input type="text" placeholder="请输入内容" v-model="input" />
      <el-select v-model="select">
        <el-option label="选项一" value="1"></el-option>
        <el-option label="选项二" value="2"></el-option>
      </el-select>
      <div>
        <el-radio v-model="radio" label="1">单选框1</el-radio>
        <el-radio v-model="radio" label="2">单选框2</el-radio>
        <el-checkbox v-model="checked" label="多选框"></el-checkbox>
      </div>
    </el-space>
    <div>
      <el-date-picker v-model="date" type="date" placeholder="选择日期"> </el-date-picker>
    </div>
    <div>
      <el-pagination
        v-model:currentPage="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="fakeMethod"
        @current-change="fakeMethod"
      >
      </el-pagination>
    </div>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/">面包屑</el-breadcrumb-item>
        <el-breadcrumb-item to="/">单机游戏</el-breadcrumb-item>
        <el-breadcrumb-item to="/">GTA5</el-breadcrumb-item>
        <el-breadcrumb-item>GTA三部曲重置版</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <el-dropdown>
        <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>显卡</el-dropdown-item>
            <el-dropdown-item>什么</el-dropdown-item>
            <el-dropdown-item>时候</el-dropdown-item>
            <el-dropdown-item disabled>降价</el-dropdown-item>
            <el-dropdown-item divided>明年</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="fix-bar">
      <el-space>
        <h2>这里修改你的主题颜色(颜色默认会存储到本地localstorage持久化) --></h2>
        <el-color-picker class="color-picker" v-model="color" @change="changeTheme" />
      </el-space>
    </div>
  </el-space>
</template>

<script>
import { reactive, toRefs } from "vue";
import { mix } from "@/utils";
import nProgress from "nprogress";

export default {
  setup() {
    // 变量前缀
    const pre = "--el-color-primary";
    // 白色混合色
    const mixWhite = "#ffffff";
    // 黑色混合色
    const mixBlack = "#000000";
    const state = reactive({
      color: localStorage.getItem("primaryColor") || "#409eff",
      input: "",
      select: "1",
      radio: "1",
      date: "",
      currentPage: 1,
      checked: true,
    });
    /**
     * @description: 更改主题
     * @param {String} color 颜色
     */
    const changeTheme = (color = state.color) => {
      const node = document.documentElement;
      node.style.setProperty(pre, color);
      localStorage.setItem("primaryColor", color);
      // 这里是覆盖原有颜色的核心代码
      for (let i = 1; i < 10; i += 1) {
        node.style.setProperty(`${pre}-light-${i}`, mix(color, mixWhite, i * 0.1));
      }
      node.style.setProperty("--el-color-primary-dark", mix(color, mixBlack, 0.1));
      // 本地缓存style，样式持久化，你也可以存在后端
      localStorage.setItem("style", node.style.cssText);
    };

    const handleNprogress = (flag) => (flag ? nProgress.start() : nProgress.done());
    return {
      ...toRefs(state),
      changeTheme,
      handleNprogress,
      fakeMethod: () => {},
    };
  },
};
</script>

<style lang="scss">
.theme-page {
  width: 100%;
  height: 100%;
  padding: 5px;
  & .fix-bar {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2;
  }
}
</style>
